<template>
  <div class="more-action">
    <!-- 状态一 -->
    <van-cell-group v-if="!isReport">
      <van-cell @click="disLike">不感兴趣</van-cell>
      <van-cell is-link @click="feedback">反馈垃圾内容</van-cell>
      <van-cell @click="defriend">拉黑作者</van-cell>
    </van-cell-group>
    <!-- 状态二 反馈-->
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell
        v-for="item in reportsList"
        :key="item.value"
        @click="listContent(item)"
        >{{item.label}}
        </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import reports from '@/constant/reports'
export default {
  data () {
    return {
      isReport: false, // 显示状态一
      reportsList: reports
    }
  },
  methods: {
    feedback () {
      this.isReport = true // 显示状态二
    },
    // 点击不感兴趣
    disLike () {
      console.log('不喜欢')
      this.$emit('introductDis') // 向父组件发送确定信息
    },
    // 点击详细反馈垃圾问题
    listContent (val) {
      console.log(val, '像父组件传入所需要的type参数')
      // 像父组件传入点击反馈信息以及所需要的type参数
      this.$emit('feedback', val.value)
    },
    // 拉黑作者
    defriend () {
      this.$emit('deauthor')
    }
  }
}
</script>
<style lang="less" scoped>
.more-action {
  border-radius: 4px;
}
</style>
